<include file="public@header" />
</head>

<link href="__STATIC__/css/element/index.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
<style type="text/css">
    html,
    body {
        overflow: visible;
    }

    .el-row {
        margin-bottom: 20px;
    }

    .el-col {
        border-radius: 4px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .el-input__inner {
        height: 35px !important;
        line-height: 35px !important;
    }
</style>

<body>
<div class="wrap js-check-wrap" id="app">

    <template  v-loading.fullscreen.lock="fullscreenLoading">


        <el-form ref="elForm" :model="formData" size="medium" label-width="100px" class="margin-top-20">


            <el-row>
                <el-col :span="12">
                    <el-form-item label="钢板信息" prop="coil_id">
                        <el-select clearable :style="{width: '80%'}" v-model="coil_id" filterable remote
                                   reserve-keyword placeholder="请搜索钢板">
                            <el-option v-for="(item, index) in plateOptions" :key="item.value" :label="item.text"
                                       :value="item.value" :disabled="item.disabled">
                            </el-option>
                        </el-select>
                        <el-button type="primary" @click="addForm">加入拆包</el-button>
                    </el-form-item>

                </el-col>


            </el-row>
            <el-row v-for="(item, index) in formData.coil_id">
                <el-col>
                    <el-form-item label="钢板信息" prop="owner_id">
                        {{plateOptions[item]['text']}}
                        <el-button type="primary" @click="removeForm(item)">移除</el-button>
                        <el-button type="primary" plain @click.stop="addlistForm(item)" icon="plus">添加</el-button>
                    </el-form-item>
                    <template>
                        <!--                            <el-button type="primary" plain @click.stop="add">新增</el-button>-->

                        <!--                            <el-table :data="plan[item]" style="width: 100%; margin-top: 17px" border>-->
                        <!--                                <el-table-column type="selection" width="55"> </el-table-column>-->
                        <!--                                <el-table-column prop="id" label="id"> </el-table-column>-->
                        <!--                                <el-table-column label="姓名">-->
                        <!--                                    <template slot-scope="{ row ,$index}">-->
                        <!--                                        <el-input v-if="row.$isEdit" v-model="row.name" placeholder="请输入名字"></el-input>-->
                        <!--                                        <span v-else>{{ row.name }}</span>-->
                        <!--                                    </template>-->
                        <!--                                </el-table-column>-->
                        <!--                                <el-table-column label="地址">-->
                        <!--                                    <template slot-scope="{ row }">-->
                        <!--                                        <el-input v-if="row.$isEdit" v-model="row.address"-->
                        <!--                                            placeholder="请输入地址"></el-input>-->
                        <!--                                        <span v-else>{{ row.address }}</span>-->
                        <!--                                    </template>-->
                        <!--                                </el-table-column>-->
                        <!--                                <el-table-column prop="date" label="日期"> </el-table-column>-->

                        <!--                            </el-table>-->
                        <el-table :data="plan[item]" border>
                            <el-table-column label="类型" width="150">
                                <template slot-scope="{ row , $index}">
                                    <el-select clearable v-model="row.type" filterable remote reserve-keyword @change="changetype(row, item,$index)"
                                               placeholder="请搜索类型" >
                                        <el-option v-for="(item, $index) in d_typeOptions" :key="item.value"
                                                   :label="item.text" :value="item.value" :disabled="item.disabled" >
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="捆包号" width="150">
                                <template slot-scope="{ row }">
                                    <el-input v-model="row.name" placeholder="请选择类型" :disabled="true"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="零件号" width="150">
                                <template slot-scope="{ row, $index }">
                                    <el-select clearable v-model="row.partno_id" filterable remote reserve-keyword @change="changepartno(row, item,$index)"
                                               placeholder="请搜索零件号" >
                                        <el-option v-for="(item, index) in partnoOptions" :key="item.value"
                                                   :label="item.text" :value="item.value" :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>

                            <el-table-column label="牌号" width="150">
                                <template slot-scope="{ row }">
                                    <el-select clearable v-model="row.grade_id" filterable remote reserve-keyword
                                               placeholder="请搜索牌号">
                                        <el-option v-for="(item, index) in grade_idOptions" :key="item.value"
                                                   :label="item.text" :value="item.value" :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="合同号" width="150">
                                <template slot-scope="{ row }">
                                    <el-select clearable v-model="row.ht_id" filterable remote reserve-keyword
                                               placeholder="请搜索合同">
                                        <el-option v-for="(item, index) in htOptions" :key="item.value"
                                                   :label="item.text" :value="item.value" :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="归属类型" width="150">
                                <template slot-scope="{ row }">
                                    <el-select :style="{width: '60%'}" v-model="row.companytype"
                                               placeholder="请搜索归属类型">
                                        <el-option v-for="(item, index) in companytypeOptions" :key="item.value"
                                                   :label="item.text" :value="item.value" :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="客户名称" width="150">
                                <template slot-scope="{ row }">
                                    <el-select clearable v-model="row.company_id" filterable remote reserve-keyword
                                               placeholder="请搜索客户名称" >
                                        <el-option v-for="(item, index) in companyOptions" :key="item.value"
                                                   :label="item.text" :value="item.value" :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <!--                                <el-table-column label="捆包号"  width="150">-->
                            <!--                                    <template slot-scope="{ row }">-->
                            <!--                                        <el-select clearable  v-model="row.company_id"-->
                            <!--                                            filterable remote reserve-keyword placeholder="请搜索客户名称"-->
                            <!--                                            :remote-method="getcompany">-->
                            <!--                                            <el-option v-for="(item, index) in companyOptions" :key="item.value"-->
                            <!--                                                :label="item.text" :value="item.value" :disabled="item.disabled">-->
                            <!--                                            </el-option>-->
                            <!--                                        </el-select>-->
                            <!--                                    </template>-->
                            <!--                                </el-table-column>-->
                            <el-table-column label="数量" width="150">
                                <template slot-scope="{ row,$index }">
                                    <el-input v-model="row.sheets" placeholder="请输入数量" @change="changeweight(row, item,$index)" ></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="厚" width="150">

                                <template slot-scope="{ row,$index }">
                                    <el-input v-model="row.d" placeholder="请输入厚" @change="changeweight(row, item,$index)"></el-input>
                                </template>

                            </el-table-column>
                            <el-table-column label="宽" width="150">

                                <template slot-scope="{ row,$index }">
                                    <el-input v-model="row.w" placeholder="请输入宽" @change="changeweight(row, item,$index)"></el-input>
                                </template>


                            </el-table-column>
                            <el-table-column label="长" width="150">

                                <template slot-scope="{ row,$index }">
                                    <el-input v-model="row.h" placeholder="请输入长" @change="changeweight(row, item,$index)"></el-input>
                                </template>

                            </el-table-column>
                            <el-table-column label="重量" width="150">

                                <template slot-scope="{ row }">
                                    <el-input v-model="row.weight" placeholder="请输入重量"></el-input>
                                </template>

                            </el-table-column>
                            <el-table-column label="工序" width="150">
                                <template slot-scope="{ row }">
                                    <el-input v-model="row.processes" placeholder="请输入工序"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="库区" width="150">
                                <template slot-scope="{ row }">
                                    <el-select clearable v-model="row.ware_id" filterable remote reserve-keyword
                                               placeholder="请搜索库区" :remote-method="getware">
                                        <el-option v-for="(item, index) in wareOptions" :key="item.value"
                                                   :label="item.text" :value="item.value" :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column label="库位" width="150">
                                <template slot-scope="{ row }">
                                    <el-input v-model="row.kuwei" placeholder="请输入库位"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="备注" width="150">
                                <template slot-scope="{ row }">
                                    <el-input v-model="row.remark" placeholder="请输入备注"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column prop="date" label="操作" fixed="right">
                                <template slot-scope="{ row, $index }">
                                    <el-button type="danger" plain size="mini"
                                               @click="deleteData(row, $index,item)">删除</el-button>

                                    <!-- <el-button v-if="row.$isEdit" type="primary" plain size="mini"
                                               @click.stop="confirmSubmit(row)">确认</el-button> -->

                                    <!-- <el-button v-else type="primary" plain size="mini"
                                               @click.stop="edit($index)">编辑</el-button> -->
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-col>
            </el-row>


            <el-col :span="24">
                <el-form-item size="large">
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-col>
        </el-form>


    </template>

</div>




<script src="/static/js/element/vue.js"></script>
<script src="/static/js/element/index.js"></script>

<script src="/static/js/admin.js"></script>
<script src="/static/js/layer/layer.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            fullscreenLoading: false,
            isLoading:false,
            message: 'Hello Vue.js!',
            input: '',
            formData: {
                name:'',
                type: 3,
                delivery_time: Date.parse(new Date()),
                pd: Date.parse(new Date()),
                coil_id: [],


            },
            first: 1,
            companytypeOptions: {},
            c_typeOptions: {},
            d_typeOptions: {},
            htOptions: {},
            typeOptions: [],
            companyOptions: {},
            grade_idOptions: {},
            coilOptions: {},
            plateOptions: {},
            partnoOptions:{},
            coil_id: '',
            tableData: [],
            plan: [],
            name: ''
        }, created() {
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(() => {
                loading.close();
            }, 500);
            this.getcompanytype();
            this.getc_type();
            this.getht();
            this.getcompany();
            this.getgrade_id();
            this.getplate();
            this.gettype();
            this.getware();
            // this.getplanname();
            this.gettp();
            this.getpartno();
        }, methods: {

            changeweight(row, data, i){
                if (row.d&&row.w&&row.h&&row.sheets){

                    // $co = (($params['d'] * ($params['w'] / 1000) * ($params['h'] / 1000) * 7.85) / 1000) * $params['sheets'];
                    let weight=    ((row.d * (row.w / 1000) * (row.h/ 1000) * 7.85) / 1000) * row.sheets;
                    // console.log(weight)
                    this.$set(row, "weight", Math.round(weight*1000)/1000);
                }
            },
            // 删除数据
            // 分前端和请求接口删除
            deleteData(row, i, data) {
                // console.log( this.plan[data])
                // console.log(i)
                // console.log(data)
                // const index1 = this.plan.indexOf(data);
                // console.log(index1)
                // if (index1 !== -1) {
                this.plan[data].splice(i, 1);
                // this.$set(this.plan,index , [])
                // }
                // if (row.$isEdit) {
                //     this.tableData.splice(i, 1);
                // } else {
                //     console.log("向后端发请求");
                // }
            },changepartno(row,  data,i){
                // console.log(row)
                //  console.log(i)
                // console.log(data)
                let that=this;
                let pa=  that.partnoOptions[row.partno_id]
                console.log(pa);
                that.$set(row, "d", pa.d);
                that.$set(row, "w", pa.w);
                that.$set(row, "h", pa.h);
                that.$set(row, "weight", pa.weight);
                that.$set(row, "grade_id", pa.grade_id);
                that.$set(row, "sheets", pa.sheets);

            },
            changetype(row,  data,i){
                let that = this;
                $.post('{:url("hxkj/confirm")}',
                    {
                        type:row.type

                    },
                    function (data, item) {
                        // console.log(data);
                        that.$set(row, "name", data.data);
                        // row.name = data.data
                    });
            },
            getonetype(type){
                let that = this;
                let name;
                $.post('{:url("hxkj/confirm")}',
                    {
                        type:type

                    },
                    function (data, item) {
                        console.log(data);
                        name=data.data
                        // that.$set(row, "name", data.data);
                        // row.name = data.data
                    });
                    console.log(name)
                    return name;
            },

            addlistForm(index) {
                console.log('add---------' + index)
                let name
             let that=this;
                // console.log( this.plateOptions[index]);
                $.post('{:url("hxkj/confirm")}',
                    {
                        type:this.plateOptions[index].type
                    },
                    function (data, item) {
                        console.log(data);
                        name=data.data
                        let ne = {
                            d: that.plateOptions[index].d,
                            w: that.plateOptions[index].w,
                            h: that.plateOptions[index].h,
                            sheets: that.plateOptions[index].sheets,
                            weight: that.plateOptions[index].weight,
                            partno_id: that.plateOptions[index].partno_id,
                            steel_id: that.plateOptions[index].steel_id,
                            type : that.plateOptions[index].type,
                            ht_id : that.plateOptions[index].ht_id,
                            companytype : that.plateOptions[index].companytype,
                            company_id : that.plateOptions[index].company_id,
                            processes : that.plateOptions[index].processes,
                            ware_id : that.plateOptions[index].ware_id,
                            kuwei : that.plateOptions[index].kuwei,
                            remark : that.plateOptions[index].remark,
                            grade_id : that.plateOptions[index].grade_id,
                            name : name,
                            $isEdit: true,
                        }
                        let length = 0
                        if (that.plan[index]) {

                            length = that.plan[index].length
                        } else {
                            // this.plan.push([]);
                            that.$set(that.plan, index, [])
                            length = 0;
                        }
                        // console.log(length)
                        // this.plan.splice(index, 0,nr);
                        that.$set(that.plan[index], length, ne)
                    });
                    // console.log(name)

                // console.log(this.plan)
            },
            removeForm(index) {
                // this.formData.coil_id.splice(index, 1);
                const index1 = this.formData.coil_id.indexOf(index);
                if (index !== -1) {
                    this.formData.coil_id.splice(index1, 1);
                    this.$set(this.plan, index, [])
                }
            },
            addForm() {
                let that = this;

                console.log(that.coil_id)
                if (!(that.coil_id > 0)) {
                    return;
                }
                that.formData.coil_id.unshift(that.coil_id)
                console.log(that.formData.coil_id)
                that.formData.coil_id = Array.from(new Set(that.formData.coil_id)); // 将Set转换为数组并赋值给uniqueArray

            },
            submitForm() {
                console.log(this.formData)
                console.log(this.plan)
                let that = this;
                $.post('{:url("plannew/unpackadd")}',
                    {
                        formData: that.formData,
                        plan: that.plan,
                    },
                    function (data, item) {
                        // console.log(data);

                        // that.formData.name = data.data
                        // that.name=data.data
                        console.log(data)
                        if (data.code==1){
                            that.$message({
                                message: data.msg,
                                type: 'success'
                            });
                        }else{
                            that.$message.error(data.msg);
                        }
                        setTimeout(() => {
                            if (data.url) {
                                //返回带跳转地址
                                window.location.href = data.url;
                            } else {
                                if (data.code == 1) {
                                    //刷新当前页
                                    reloadPage(window);
                                }
                            }
                        }, 1000);

                    });


            },
            resetForm() {
                this.formData = {
                    name: this.name,
                    type: 1,
                    delivery_time: new Date(),
                    pd: new Date(),
                    coil_id: [],


                };
                this.plan = [];
            },
            getpartno(){
                let that = this;
                $.post('{:url("hxkj/getpartno")}',
                    {


                    },
                    function (data, item) {
                        // console.log(data);

                        that.partnoOptions = data.data
                    });
            },
            gettp() {
                let that = this;
                $.post('{:url("hxkj/gettp")}',
                    {


                    },
                    function (data, item) {
                        // console.log(data);

                        that.typeOptions = data.data
                    });
            },
            //获取计划号
            getplanname() {
                let that = this;
                $.post('{:url("hxkj/getplanname")}',
                    {
                        type: that.formData.type

                    },
                    function (data, item) {
                        // console.log(data);
                        that.$set(that.formData, "name", data.data);
                        that.$nextTick(() => {
                            that.formData.name = data.data
                            that.name = data.data
                        });

                    });
            },
            getware() {
                let that = this;
                $.post('{:url("hxkj/getware")}',
                    {


                    },
                    function (data, item) {
                        // console.log(data);

                        that.wareOptions = data.data
                    });
            },
            gettype() {
                let that = this;
                $.post('{:url("hxkj/gettype")}',
                    {


                    },
                    function (data, item) {
                        // console.log(data);

                        that.d_typeOptions = data.data
                    });
            },
            getplate() {

                let that = this;
                that.isLoading=true;
                $.post('{:url("hxkj/getunpackplate")}',
                    {


                    },
                    function (data, item) {
                        // console.log(data);

                        that.plateOptions = data.data
                        that.isLoading=false;
                    });
            },
            getgrade_id() {
                let that = this;
                // console.log(222)
                $.post('{:url("hxkj/getgrade_id")}',
                    {


                    },
                    function (data, item) {
                        // console.log(data);

                        that.grade_idOptions = data.data
                    });
            },
            getcompany() {
                let that = this;
                // console.log(222)
                $.post('{:url("hxkj/getcompany")}',
                    {


                    },
                    function (data, item) {
                        // console.log(data);

                        that.companyOptions = data.data
                    });
            },
            getht() {
                let that = this;
                // console.log(222)
                $.post('{:url("hxkj/getht")}',
                    {


                    },
                    function (data, item) {
                        // console.log(data);

                        that.htOptions = data.data
                    });
            },
            getc_type() {
                let that = this;
                // console.log(222)
                $.post('{:url("hxkj/getctype")}',
                    {


                    },
                    function (data, item) {
                        // console.log(data);

                        that.c_typeOptions = data.data
                    });
            },
            getcompanytype() {
                let that = this;
                // console.log(222)
                $.post('{:url("hxkj/getcompanytype")}',
                    {


                    },
                    function (data, item) {
                        // console.log(data);

                        that.companytypeOptions = data.data
                    });
            },
            getowners_new() {
                console.log(11111)
            }
        }

    })
</script>
</body>

</html>